<!DOCTYPE html>
<html lang="zh-CN">



<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书管理系统</title>
    <style>
        /* CSS 样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: #f5f5f5;
        }

        h1 {
            margin-top: 20px;
        }

        form {
            width: 300px;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }
        form label{
            margin-bottom: 5px;
        }

        input[type="text"],
        input[type="password"] {
            width: calc(100% - 20px);
            padding: 8px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }

        button[type="submit"],
        button[type="button"] {
            width: calc(100% - 20px);
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            /*margin-top: 10px;*/
        }

        button[type="submit"]:hover,
        button[type="button"]:hover {
            background-color: #45a049;
        }

        #registerMessage,
        #loginMessage,
        #searchResults {
            width: 300px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            background-color: #f9f9f9;
        }
        .col-4{
            -ms-flex: 0 0 33%;
            flex: 0 0 33%;
            max-width: 33%;
            display:flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;
            min-height: 300px;
            height: fit-content;
        }
        .col-4 div{
            /*text-align: center;*/
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .row {
            width: 1440px;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            margin-right: -15px;
            margin-left: -15px;
            align-content: space-between;
        }
    </style>
</head>

<body>
<h1>图书管理系统</h1>

<div class="row">
    <div class="col-4">
        <!-- 用户注册表单 -->
        <div>
            <h2>用户注册</h2>
            <form id="registerForm">
                <label for="username">用户名:</label>
                <input type="text" id="username" name="username" required><br><br>
                <label for="password">密码:</label>
                <input type="password" id="password" name="password" required><br><br>
                <button type="submit">注册</button>
            </form>
        </div>

        <!-- 注册信息提示 -->
        <div>
            <p>返回信息</p>
            <div id="registerMessage"></div>
        </div>

        <!-- 用户登录表单 -->
        <div>
            <h2>用户登录</h2>
            <form id="loginForm">
                <label for="loginUsername">用户名:</label>
                <input type="text" id="loginUsername" name="username" required><br><br>
                <label for="loginPassword">密码:</label>
                <input type="password" id="loginPassword" name="password" required><br><br>
                <button type="submit">登录</button>
            </form>
        </div>

        <!-- 登录信息提示 -->
        <div>
            <p>返回信息</p>
            <div id="loginMessage"></div>
        </div>
    </div>

    <div class="col-4">
        <!-- 插入书籍按钮 -->
        <div>
            <h2>插入书籍</h2>
            <form>
                <button id="insertBookBtn" type="button">插入书籍</button>
            </form>
        </div>

        <!-- 删除书籍表单 -->
        <div>
            <h2>删除书籍</h2>
            <form id="deleteBookForm">
                <label for="deleteBookId">书籍ID:</label>
                <input type="text" id="deleteBookId" name="number" required><br><br>
                <button type="submit">删除书籍</button>
            </form>
        </div>
    </div>

    <div class="col-4">
        <!-- 修改书籍表单 -->
        <div>
        <h2>修改书籍</h2>
        <form id="updateBookForm">
            <label for="updateBookId">书籍ID:</label>
            <input type="text" id="updateBookId" name="number" required><br><br>
            <label for="updateBookName">新书籍名称:</label>
            <input type="text" id="updateBookName" name="name" required><br><br>
            <label for="updateBookAuthor">新作者:</label>
            <input type="text" id="updateBookAuthor" name="author" required><br><br>
            <button type="submit">修改书籍</button>
        </form>
        </div>

        <!-- 查询书籍表单 -->
        <div>
        <h2>查询书籍</h2>
        <form id="searchBookForm">
            <label for="searchBookName">书籍编号:</label>
            <input type="text" id="searchBookName" name="name" required><br><br>
            <button type="submit">查询书籍</button>
        </form>
        </div>
    </div>
</div>

<script>
    // JavaScript 代码
    document.addEventListener('DOMContentLoaded', function () {
        const registerForm = document.getElementById('registerForm');
        const registerMessageDiv = document.getElementById('registerMessage');
        const loginForm = document.getElementById('loginForm');
        const loginMessageDiv = document.getElementById('loginMessage');
        const insertBookBtn = document.getElementById('insertBookBtn');
        const deleteBookForm = document.getElementById('deleteBookForm');
        const updateBookForm = document.getElementById('updateBookForm');
        const searchBookForm = document.getElementById('searchBookForm');
        const searchResultsDiv = document.getElementById('searchResults');

        // 注册表单提交事件
        registerForm.addEventListener('submit', function(event) {
            event.preventDefault();
            registerMessageDiv.textContent = "发送请求中..."
            const formData = {
                username: document.getElementById('username').value,
                password: document.getElementById('password').value
            };

            fetch('/user/register', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(formData)
            })
                .then(response => response.json())
                .then(data => {
                    if (data.code === 0) {
                        registerMessageDiv.textContent = data.msg;
                    } else {
                        registerMessageDiv.textContent = "注册失败，请重试。";
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    registerMessageDiv.textContent = "发生错误，请稍后再试。";
                });
        });

// 登录表单提交事件
        loginForm.addEventListener('submit', function(event) {
            event.preventDefault();
            loginMessageDiv.textContent = "发送请求中..."
            const formData = {
                username: document.getElementById('loginUsername').value,
                password: document.getElementById('loginPassword').value
            };

            fetch('/user/login', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(formData)
            })
                .then(response => response.json())
                .then(data => {
                    if (data.code === 0) {
                        loginMessageDiv.textContent = data.msg;
                    } else {
                        loginMessageDiv.textContent = "登录失败，请检查用户名和密码。";
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    loginMessageDiv.textContent = "发生错误，请稍后再试。";
                });
        });


        // 插入书籍按钮点击事件
        insertBookBtn.addEventListener('click', function () {
            event.preventDefault();

            fetch('/book/insert', {
                method: 'POST'
            })
                .then(response => response.json())
                .then(data => {
                    alert(JSON.stringify(data));
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert("发生错误，请稍后再试。"); // 在真实项目中可以根据需求做更合适的处理
                });
        });

        // 删除书籍表单提交事件
        deleteBookForm.addEventListener('submit', function (event) {
            event.preventDefault();

            const formData = new URLSearchParams(new FormData(deleteBookForm)).toString();
            fetch('/book/del', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                body: formData
            })
                .then(response => response.json())
                .then(data => {
                    alert(JSON.stringify(data));
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert("发生错误，请稍后再试。"); // 在真实项目中可以根据需求做更合适的处理
                });
        });



        // 修改书籍表单提交事件
        updateBookForm.addEventListener('submit', function (event) {
            event.preventDefault();

            const formData = new URLSearchParams(new FormData(updateBookForm)).toString();
            fetch('/book/update', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                body: formData
            })
                .then(response => response.json())
                .then(data => {
                    alert(JSON.stringify(data)); // 在真实项目中可以根据需求做更合适的处理
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert("发生错误，请稍后再试。"); // 在真实项目中可以根据需求做更合适的处理
                });
        });



        // 检索书籍表单提交事件
        searchBookForm.addEventListener('submit', function(event) {
            event.preventDefault();

            const bookNumber = document.getElementById('searchBookName').value;

            fetch(`/book/search?number=${bookNumber}`, {
                method: 'GET'
            })
                .then(response => response.json())
                .then(data => {
                    alert(JSON.stringify(data)); // 在真实项目中可以根据需求做更合适的处理
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert("发生错误，请稍后再试。"); // 在真实项目中可以根据需求做更合适的处理
                });
        });


    });
</script>
</body>

</html>
